<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <title>About - Botany Template</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../static/css/templatemo_style.css" rel="stylesheet" type="text/css">

    <style>
        table thead th {
        color: black; /* 将表格标题行文字颜色改为黑色 */
    }
        body {
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: white; /* 将字体颜色改为白色 */
        }

        table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 20px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }

        form {
            margin-bottom: 20px;
        }

        label, select, button {
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .pagination {
            margin-top: 20px;
        }

        .pagination a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
            margin: 0 4px;
        }

        .pagination a.active {
            background-color: #009688;
            color: white;
            border: 1px solid #009688;
        }

        .pagination a:hover:not(.active) {background-color: #ddd;}
    </style>
</head>

<body class="templatemo_flower_2">
    <div id="main_container">
        <div class="container" id="about">
            <div class="row col-wrap">
                <div id="left_container" class="col col-md-3 col-sm-12">
                    <div class="templatemo_logo">
                        <a href="#"><img src="../static/images/templatemo_logo.png" alt="Botany Theme"></a>
                    </div>
                    <nav id="main_nav">
                        <ul class="nav">
                            <li><a href="index.html">首页</a></li>
                            <li class="active"><a href="about.html">数据收集</a></li>
                            <li><a href="services.html">每月pm2.5总和分析</a></li>
                            <li><a href="portfolio.html">每月so2平均指数分析</a></li>
                            <li><a href="contact.html">全年空气质量等级分析</a></li>
                        </ul>
                    </nav> <!-- nav -->
                </div>
                <div id="right_container" class="col col-md-9 col-sm-12">
                    <div class="row"><div class="col col-md-12"><h2>数据收集</h2></div></div>
                    <div>
                        <form method="post" action="/about.html">
                            <label for="city">选择城市：</label>
                            <select id="city" name="city">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                            </select>
                            <label for="year">选择年份：</label>
                            <select id="year" name="year">
                                <option value="2020">2020年</option>
                                <option value="2021">2021年</option>
                            </select>
                            <button type="submit">提交</button>
                        </form>
                    </div>
                    <div>
                        <table>
                            <thead>
                                <tr>
                                   <th>日期</th><th>空气质量</th><th>aqi</th><th>pm2.5</th>
                                    <th>pm10</th><th>so2</th><th>no2</th><th>co</th><th>o3</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for v in data %}
                                    <tr>
                                        <td>{{ v["date"] }}</td> <td>{{ v["zldj"] }}</td> <td>{{ v["aqi"] }}</td>
                                        <td>{{ v["pm25"] }}</td> <td>{{ v["pm10"] }}</td> <td>{{ v["so2"] }}</td>
                                        <td>{{ v["no2"] }}</td> <td>{{ v["co"] }}</td> <td>{{ v["o3"] }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <footer class="row credit">
                        <div class="col col-md-12">
                            <div id="templatemo_footer">
                                Copyright © 2084 <a href="#">Company Name</a>
                            </div>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
